<template>
  <div class="dataContainer">
    <!-- Search start -->
    <el-form :inline="true" size="small" :model="queryParams" class="demo-form-inline searchContainer">
      <el-form-item label="字典类型编号: ">
        <el-input v-model="queryParams.dicTypeCode" placeholder="请输入字典类型编号"  @keyup.enter="onSearch" />
      </el-form-item>
      <el-form-item label="字典类型名称: ">
        <el-input v-model="queryParams.dicTypeName"  placeholder="请输入字典类型名称"  @keyup.enter="onSearch" />
      </el-form-item>
      <el-form-item>
        <el-button class="bs-form-btn" size="small" type="primary" @click="onSearch" ><el-icon><Search /></el-icon>查 询</el-button>
        <ResetButton :queryParams="queryParams"/>
        <el-button size="small" type="primary" @click="openModal"  v-permission="['system::dictionaryTypeAdd']"><el-icon><Plus /></el-icon>新增 </el-button>
      </el-form-item>
    </el-form>
    <!-- Search end -->

    <!-- Table start -->
    <div>
      <el-table
        ref="tableRef"
        v-loading="tableLoading"
        :border="true"
        class="bs-table"
        :height="tableHeight"
        :data="tableData"
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{textAlign: 'center'}"
        table-layout='auto'
      >
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="dicTypeCode" label="类型编号" sortable />
        <el-table-column prop="dicTypeName" label="类型名称" sortable/>
        <el-table-column prop="dicTypeSort" label="排序" sortable/>
        <el-table-column prop="descript" label="描述" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column fixed="right" width="260" label="操作"  v-permission="['system::dictionaryTypeUpdate','system::dictionaryTypeDelete']">
          <template #default="scope" >
            <el-button  size="small" link type="success" @click="openEditModal(scope.row)" v-permission="['system::dictionaryTypeUpdate']"><el-icon><Edit /></el-icon> 修改</el-button>
            <el-button  size="small" link type="primary" @click="openSettingModal(scope.row)" v-permission="['system::dictionaryTypeUpdate']"><el-icon><Setting /></el-icon> 配置</el-button>
            <el-button  size="small" link type="danger" @click="deleteDicType(scope.row.dicTypeCode)" v-permission="['system::dictionaryTypeDelete']"><el-icon><Delete /></el-icon> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        small="small"
        disabled="disabled"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        @pagination="selectByPage"
      />
      <AddOrUpdate ref="addOrUpdateRef" @flushTable="onSearch"/>
      <Dictionary ref="dictionaryRef" />
    </div>
  </div>
</template>

<script>
import { selectByPage, deleteDictionaryType } from '@/api/system/dictionaryType'
import AddOrUpdate from './addOrUpdate.vue'
import Dictionary from '@/views/system/dictionary'
import { mapState } from 'vuex'
export default {
  components: {
    AddOrUpdate,
    Dictionary
  },
  data() {
    return {
      tableTotal: 0,
      tableLoading: false,
      tableData: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 500,
        dicTypeName: '',
        dicTypeCode: '',
      },
      tableHeight:(window.innerHeight - 360) + 'px',
    }
  },
  created() {
    this.selectByPage()
  },
  computed:{
    ...mapState(['amplify'])
  },
  mounted(){
    this.countTableHeight()
  },
  methods: {
    selectByPage() {
      this.tableLoading = true
      selectByPage(this.queryParams)
        .then((res) => {
          this.tableLoading = false
          if (res.code === 1) {
            this.tableData = res.data.records
            this.tableTotal = res.data.total
          }
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    // 搜索
    onSearch() {
      this.queryParams.pageNo = 1
      this.selectByPage()
    },
    openModal(){
      this.$refs.addOrUpdateRef.openModal({})
    },
    openEditModal(row){
      this.$refs.addOrUpdateRef.openModal(row)
    },
    deleteDicType(dicTypeCode){
      this.$confirm('请确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDictionaryType({ 'dicTypeCode':dicTypeCode}).then(res => {
          if (res.code === 1) {
            this.onSearch()
          }
        })
      }).catch(()=>{})
    },
    // 打开设置弹框
    openSettingModal(row){
      this.$refs.dictionaryRef.openDrawer(row)
    },
     // 表格高度
		countTableHeight(){
			let tableHeight = (window.innerHeight - 360) + 'px'
			// 计算搜索区域
			var searchContainerList =  document.getElementsByClassName("searchContainer")
			if (this.arrIsNotEmpty(searchContainerList) && this.arrIsNotEmpty(searchContainerList[0])) {
          let searchContainerHeight = searchContainerList[0].offsetHeight
          // header高度+面包屑高度+tab多标签页高度+tab多标签页底部margin的高度
          let staticHeight = 60+38+30+10
          if (this.amplify == true) {
              // 放大后 , 就没有头部, 面包屑, tab多标签页了 , 预留70px给空白 , 并预留50px给分页
              tableHeight = window.innerHeight - searchContainerHeight - 50 - 70 + 'px'
          } else {
              tableHeight = window.innerHeight - (staticHeight + searchContainerHeight) - 50 - 50 + 'px'
          }
          this.tableHeight = tableHeight
      }
      console.log("表格高度=",this.tableHeight);
		},
  },
  watch: {
		amplify(newValue,oldValue) {
			this.countTableHeight()
		}
	},
}
</script>

<style scoped>
.tagClass {
  display: inline-block;
  padding: 0px 10px;
  font-size: 12px;
  color: white;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  word-break: break-word;
}

.b-tag-warning {
  display: inline-block;
  margin: 0.2rem;
  padding: 5px 10px;
  font-size: 12px;
  color: #ffba00;
  background: #fff8e6;
  border: 1px solid #fff1cc;
  border-radius: 4px;
}

.b-tag-error {
  display: inline-block;
  margin: 0.2rem;
  padding: 5px 10px;
  font-size: 12px;
  color: #ff4949;
  background: #ffeded;
  border: 1px solid #ffdbdb;
  border-radius: 4px;
}

.b-tag-success {
  display: inline-block;
  margin: 0.2rem;
  padding: 5px 10px;
  font-size: 12px;
  color: #13ce66;
  background: #e7faf0;
  border: 1px solid #d0f5e0;
  border-radius: 4px;
}
</style>
